<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>骡窝日报详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/newsContent.css">
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="js/plugins/swiper/swiper.min.css">
    <script src="js/plugins/swiper/swiper.min.js"></script>
    <style>
        html, body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 50%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 8px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
    <script>
        $(function () {
            var params = getParams();
            //如果没有id就直接结束方法
            if (!params.id) {
                return;
            }
            $.get('/news/' + params.id, function (data) {
                $(".newsDetail").renderValues(data);
            });
            //获取推荐日报
            $.get('/news/hots', {state: 2, pageSize: 5}, function (data) {
                console.log(data);
                $("#newRecommend").renderValues(data);
                $(document).ready(function () {
                    var swiper = new Swiper('.swiper-container', {
                        slidesPerView: 3,
                        spaceBetween: 30,
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true
                        }
                    });
                })
                //给a链接绑定事件
                $(".daily").click(function () {
                    console.log(url);
                    var url = $(this).data('url');
                    var id = $(this).data('tid');
                    window.location.href = url + id;
                })
            })
        })

    </script>
</head>

<body>
<div class="newsDetail">
    <div>
        <a href="javascript:history.go(-1);" style="position: absolute;top: 10px;left: 22px;">
            <span><i class="fa fa-chevron-left fa-2x" style="color: white;"></i></span>
        </a>
        <img render-src="coverUrl">

        <div class="container">
            <div class="row typeRow">
                <div class="col-4">
                    <span class="type" render-html="type.name"></span>
                </div>
                <div class="col-2">
                </div>
                <div class="col-2">
                    <span>By</span>
                </div>
                <div class="col-4">
                    <span class="type">骡窝官方</span>
                </div>
            </div>

            <div class="detail">
                <h2 class="title" render-html="title"></h2>
                <div class="content" render-html="details.content"></div>
            </div>
        </div>
    </div>
    <div class="swiper-container" id="newRecommend">
        <h6 class="news-title" style="padding-left: 10px">相关推荐</h6>
        <div class="swiper-wrapper" render-loop="list">
            <div class="swiper-slide">
                <a href="javascript:;" data-url="/newsContent.html?id=" render-attr="data-tid=list.id" class="daily">
                    <img class="rounded" render-src="list.coverUrl" width="100%" height="110px"></img>
                    <div>
                        <p render-html="list.title"></p>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>


</body>

</html>